<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>API | MuiPlayer</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="/css/mui-player.min.css">
    <link rel="stylesheet" href="/css/swiper.min.css">
    <link rel="stylesheet" href="/css/CommentCoreLibrary.min.css">
    <link rel="apple-touch-icon" href="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/logo_solid.png">
    <script src="https://www.googletagmanager.com/gtag/js?id=G-X4RSEE27EY"></script>
    <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-X4RSEE27EY');
        </script>
    <script src="/plugin/flv.min.js"></script>
    <script src="/plugin/hls.min.js"></script>
    <script src="/js/mui-player.min.js"></script>
    <script src="/js/CommentCoreLibrary.min.js"></script>
    <script src="/js/swiper.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <meta name="description" content="Mui Player 是一款优秀的 HTML5 网页视频播放器框架，提供全屏播放，播放快进，视频弹幕，解码等最常用的视频播放功能">
    <meta name="charset" content="utf-8">
    <meta name="baidu-site-verification" content="code-AdGRxnQ9NZ">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta property="og:site_name" content="MuiPlayer">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/mobile_preview.png">
    <meta name="theme-color" content="#FFFFFF">
    <meta property="og:title" content="">
    <meta property="og:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta property="og:url" content="https://muiplayer.js.org/">
    <meta property="og:locale" content="en-US">
    <meta property="twitter:title" content="">
    <meta property="twitter:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta name="keywords" content="HTML5 video, player, hls, danmaku, adaptive-bitrate, muiplayer">
    
    <link rel="preload" href="/assets/css/0.styles.ae6ed136.css" as="style"><link rel="preload" href="/assets/js/app.3641bd26.js" as="script"><link rel="preload" href="/assets/js/23.35f66f6c.js" as="script"><link rel="preload" href="/assets/js/3.67a24b41.js" as="script"><link rel="preload" href="/assets/js/53.868673eb.js" as="script"><link rel="preload" href="/assets/js/15.78fdfcaf.js" as="script"><link rel="prefetch" href="/assets/js/1.54927c41.js"><link rel="prefetch" href="/assets/js/10.dd4adaf8.js"><link rel="prefetch" href="/assets/js/11.ea997365.js"><link rel="prefetch" href="/assets/js/12.01af38a6.js"><link rel="prefetch" href="/assets/js/13.75800705.js"><link rel="prefetch" href="/assets/js/14.9fc60c4c.js"><link rel="prefetch" href="/assets/js/16.0101612c.js"><link rel="prefetch" href="/assets/js/17.a9b41ba5.js"><link rel="prefetch" href="/assets/js/18.a55912b8.js"><link rel="prefetch" href="/assets/js/19.13ce6fb6.js"><link rel="prefetch" href="/assets/js/20.57cf3163.js"><link rel="prefetch" href="/assets/js/21.a9f966ac.js"><link rel="prefetch" href="/assets/js/22.65e9060e.js"><link rel="prefetch" href="/assets/js/24.3adbb4ca.js"><link rel="prefetch" href="/assets/js/25.00421a1d.js"><link rel="prefetch" href="/assets/js/26.ba6e1ac8.js"><link rel="prefetch" href="/assets/js/27.4e1b228b.js"><link rel="prefetch" href="/assets/js/28.2d7617cb.js"><link rel="prefetch" href="/assets/js/29.ff74fd8e.js"><link rel="prefetch" href="/assets/js/30.ff8d825c.js"><link rel="prefetch" href="/assets/js/31.daa6ba5b.js"><link rel="prefetch" href="/assets/js/32.9eac0031.js"><link rel="prefetch" href="/assets/js/33.32a2153a.js"><link rel="prefetch" href="/assets/js/34.da24de19.js"><link rel="prefetch" href="/assets/js/35.c97bfd00.js"><link rel="prefetch" href="/assets/js/36.3fd6a073.js"><link rel="prefetch" href="/assets/js/37.262c376a.js"><link rel="prefetch" href="/assets/js/38.2bd8c4ba.js"><link rel="prefetch" href="/assets/js/39.618c3695.js"><link rel="prefetch" href="/assets/js/4.9edd66f8.js"><link rel="prefetch" href="/assets/js/40.0502620b.js"><link rel="prefetch" href="/assets/js/41.9a3bd9b3.js"><link rel="prefetch" href="/assets/js/42.8ac30a45.js"><link rel="prefetch" href="/assets/js/43.e3fc5609.js"><link rel="prefetch" href="/assets/js/44.9acf05da.js"><link rel="prefetch" href="/assets/js/45.8c740c98.js"><link rel="prefetch" href="/assets/js/46.250aba22.js"><link rel="prefetch" href="/assets/js/47.83ee64f1.js"><link rel="prefetch" href="/assets/js/48.8d559ee8.js"><link rel="prefetch" href="/assets/js/49.6eeaca4b.js"><link rel="prefetch" href="/assets/js/5.35f74ec6.js"><link rel="prefetch" href="/assets/js/50.6e5e287b.js"><link rel="prefetch" href="/assets/js/51.ff3ae70a.js"><link rel="prefetch" href="/assets/js/52.378b3b20.js"><link rel="prefetch" href="/assets/js/54.3c62a57a.js"><link rel="prefetch" href="/assets/js/55.035ed35d.js"><link rel="prefetch" href="/assets/js/56.08925c33.js"><link rel="prefetch" href="/assets/js/57.5d073ed4.js"><link rel="prefetch" href="/assets/js/58.dce950e6.js"><link rel="prefetch" href="/assets/js/59.092c0de9.js"><link rel="prefetch" href="/assets/js/6.30b43e5d.js"><link rel="prefetch" href="/assets/js/60.8526ebe1.js"><link rel="prefetch" href="/assets/js/61.c02d2349.js"><link rel="prefetch" href="/assets/js/62.b93eeaf2.js"><link rel="prefetch" href="/assets/js/63.b363131d.js"><link rel="prefetch" href="/assets/js/64.0cda51e1.js"><link rel="prefetch" href="/assets/js/65.d26b33ae.js"><link rel="prefetch" href="/assets/js/66.d07350b7.js"><link rel="prefetch" href="/assets/js/67.85653372.js"><link rel="prefetch" href="/assets/js/7.7232d571.js"><link rel="prefetch" href="/assets/js/8.772a3a10.js"><link rel="prefetch" href="/assets/js/9.5f308baf.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ae6ed136.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/zh/" class="home-link router-link-active"><!----> <span class="site-name">MuiPlayer</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/zh/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="/zh/demo/" class="nav-link">
  演示
</a></div><div class="nav-item"><a href="/zh/joinUs/" class="nav-link">
  下载
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  码云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="选择语言" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="选择语言" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/api.html" class="nav-link">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/api.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/zh/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="/zh/demo/" class="nav-link">
  演示
</a></div><div class="nav-item"><a href="/zh/joinUs/" class="nav-link">
  下载
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  码云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="选择语言" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="选择语言" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/api.html" class="nav-link">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/api.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/zh/guide/" aria-current="page" class="sidebar-link">介绍</a></li><li><a href="/zh/guide/begin.html" class="sidebar-link">快速开始</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/begin.html#安装" class="sidebar-link">安装</a></li><li class="sidebar-sub-header"><a href="/zh/guide/begin.html#使用" class="sidebar-link">使用</a></li></ul></li><li><a href="/zh/guide/api.html" aria-current="page" class="active sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/api.html#主要配置" class="sidebar-link">主要配置</a></li><li class="sidebar-sub-header"><a href="/zh/guide/api.html#自定义配置" class="sidebar-link">自定义配置</a></li><li class="sidebar-sub-header"><a href="/zh/guide/api.html#播放事件监听" class="sidebar-link">播放事件监听</a></li><li class="sidebar-sub-header"><a href="/zh/guide/api.html#播放器接口" class="sidebar-link">播放器接口</a></li></ul></li><li><a href="/zh/guide/mui-player-desktop-plugin.html" class="sidebar-link">PC 端扩展</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/mui-player-desktop-plugin.html#安装" class="sidebar-link">安装</a></li><li class="sidebar-sub-header"><a href="/zh/guide/mui-player-desktop-plugin.html#开始使用" class="sidebar-link">开始使用</a></li><li class="sidebar-sub-header"><a href="/zh/guide/mui-player-desktop-plugin.html#配置选项" class="sidebar-link">配置选项</a></li><li class="sidebar-sub-header"><a href="/zh/guide/mui-player-desktop-plugin.html#自定义设置组配置" class="sidebar-link">自定义设置组配置</a></li><li class="sidebar-sub-header"><a href="/zh/guide/mui-player-desktop-plugin.html#自定义右键菜单" class="sidebar-link">自定义右键菜单</a></li><li class="sidebar-sub-header"><a href="/zh/guide/mui-player-desktop-plugin.html#动作事件监听" class="sidebar-link">动作事件监听</a></li></ul></li><li><a href="/zh/guide/plus-desktop-plugin.html" class="sidebar-link">PC 端扩展【专业版】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/plus-desktop-plugin.html#下载" class="sidebar-link">下载</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-desktop-plugin.html#开始使用" class="sidebar-link">开始使用</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-desktop-plugin.html#配置选项-plus" class="sidebar-link">配置选项 Plus</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-desktop-plugin.html#接口-plus" class="sidebar-link">接口 Plus</a></li></ul></li><li><a href="/zh/guide/plus-mobile-plugin.html" class="sidebar-link">移动端扩展【专业版】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/plus-mobile-plugin.html#扫码演示" class="sidebar-link">扫码演示</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-mobile-plugin.html#下载" class="sidebar-link">下载</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-mobile-plugin.html#开始使用" class="sidebar-link">开始使用</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-mobile-plugin.html#配置选项" class="sidebar-link">配置选项</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-mobile-plugin.html#动作事件监听" class="sidebar-link">动作事件监听</a></li></ul></li><li><a href="/zh/guide/preset.html" class="sidebar-link">MediaSource 支持</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/preset.html#使用-hls-js-或者-flv-js" class="sidebar-link">使用 hls.js 或者 flv.js</a></li><li class="sidebar-sub-header"><a href="/zh/guide/preset.html#配置" class="sidebar-link">配置</a></li><li class="sidebar-sub-header"><a href="/zh/guide/preset.html#自定义使用mse库" class="sidebar-link">自定义使用MSE库</a></li></ul></li><li><a href="/zh/guide/thumbnails.html" class="sidebar-link">视频缩略图</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/zh/guide/barrage.html" class="sidebar-link">视频弹幕</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/barrage.html#使用-commentcorelibrary" class="sidebar-link">使用 CommentCoreLibrary</a></li></ul></li><li><a href="/zh/guide/subtitle.html" class="sidebar-link">视频字幕</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/zh/guide/custom-control.html" class="sidebar-link">自定义播放器控件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/custom-control.html#配置选项" class="sidebar-link">配置选项</a></li><li class="sidebar-sub-header"><a href="/zh/guide/custom-control.html#示例一-自定义播放器头按钮" class="sidebar-link">示例一：自定义播放器头按钮</a></li><li class="sidebar-sub-header"><a href="/zh/guide/custom-control.html#示例二-自定义播放器底部按钮" class="sidebar-link">示例二：自定义播放器底部按钮</a></li><li class="sidebar-sub-header"><a href="/zh/guide/custom-control.html#示例三-自定义右侧栏弹出窗口" class="sidebar-link">示例三：自定义右侧栏弹出窗口</a></li></ul></li><li><a href="/zh/guide/uni-app.html" class="sidebar-link">在 uni-app 中使用</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/zh/guide/other-problem.html" class="sidebar-link">其他问题</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="api"><a href="#api" class="header-anchor">#</a> API</h1> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>mui-player.js 创建了播放器基本使用的控件，包括定义在播放器上的进度条，开始/暂停/全屏切换按钮以及播放器头低部控件。它处理了视频播放以及兼容问题等。</p> <p>为了让代码具有较好的模块分离，我们针对性的对移动端和PC端开发出一套适用的插件，开箱即用，在你阅读过这里时就可以选择使用这两类 <strong>扩展插件</strong> 了</p> <p><a href="/zh/guide/mui-player-desktop-plugin/">mui-player-desktop-plugin.js</a></p> <p><a href="/zh/guide/plus-mobile-plugin/">mui-player-mobile.plugin.js</a></p></div> <p>mui-player.js 是创建播放器的核心库，查看可配置的 api 以及它提供对外的接口：</p> <ul><li><a href="#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE">主要配置</a></li> <li><a href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%85%8D%E7%BD%AE">自定义配置</a></li> <li><a href="#%E6%92%AD%E6%94%BE%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC">播放事件监听</a></li> <li><a href="#%E6%92%AD%E6%94%BE%E5%99%A8%E6%8E%A5%E5%8F%A3">播放器接口</a></li></ul> <h2 id="主要配置"><a href="#主要配置" class="header-anchor">#</a> 主要配置</h2> <p>从这里开始，初始化构建播放器实例：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> mp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MuiPlayer</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    container<span class="token operator">:</span><span class="token string">'#mui-player'</span><span class="token punctuation">,</span>
    src<span class="token operator">:</span><span class="token string">'../media/media.mp4'</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">属性名</th> <th style="text-align:left;">类型</th> <th style="text-align:left;">默认值</th> <th style="text-align:left;">说明</th></tr></thead> <tbody><tr><td style="text-align:left;">container</td> <td style="text-align:left;">String/Element</td> <td style="text-align:left;">required</td> <td style="text-align:left;">指定播放器容器</td></tr> <tr><td style="text-align:left;">src</td> <td style="text-align:left;">String</td> <td style="text-align:left;">required</td> <td style="text-align:left;">视频播放的资源地址</td></tr> <tr><td style="text-align:left;">title</td> <td style="text-align:left;">String</td> <td style="text-align:left;"></td> <td style="text-align:left;">标题</td></tr> <tr><td style="text-align:left;">autoplay</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;">是否自动播放，关于 autoplay 属性设置问题请<a href="/zh/guide/other-problem.html">参考</a></td></tr> <tr><td style="text-align:left;">preload</td> <td style="text-align:left;">String</td> <td style="text-align:left;">auto</td> <td style="text-align:left;">视频是否预加载，可选值 none | metadata | auto。如果 autoplay=true，则忽略该属性。</td></tr> <tr><td style="text-align:left;">loop</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;">是否循环播放</td></tr> <tr><td style="text-align:left;">muted</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;">是否静音播放</td></tr> <tr><td style="text-align:left;">width</td> <td style="text-align:left;">String/Number</td> <td style="text-align:left;">auto</td> <td style="text-align:left;">初始化播放器宽度</td></tr> <tr><td style="text-align:left;">height</td> <td style="text-align:left;">String/Number</td> <td style="text-align:left;">225px</td> <td style="text-align:left;">初始化播放器高度</td></tr> <tr><td style="text-align:left;">lang</td> <td style="text-align:left;">String</td> <td style="text-align:left;">navigator.language</td> <td style="text-align:left;">播放器界面语言，可选 en | zh-cn | zh-tw</td></tr> <tr><td style="text-align:left;">volume</td> <td style="text-align:left;">Number</td> <td style="text-align:left;">1</td> <td style="text-align:left;">初始化设置视频音量，取值 0 - 1</td></tr> <tr><td style="text-align:left;">autoFit</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">true</td> <td style="text-align:left;">播放器容器是否自适应视频高度</td></tr> <tr><td style="text-align:left;">poster</td> <td style="text-align:left;">String</td> <td style="text-align:left;"></td> <td style="text-align:left;">视频封面的资源地址</td></tr> <tr><td style="text-align:left;">live</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;">是否开启直播模式，直播模式默认菜单配置不允许控制播放速度以及循环播放</td></tr> <tr><td style="text-align:left;">initFullFixed</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;">初始化是否网页全屏播放</td></tr> <tr><td style="text-align:left;">autoOrientaion</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">true</td> <td style="text-align:left;">全屏时否自动切换方向，在 <a href="http://www.html5plus.org/doc/zh_cn/runtime.html" target="_blank" rel="noopener noreferrer">html5+<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 中全屏时会自动旋转屏幕，部分手机浏览器全屏时自动旋转方向。<br>Tag：ios 全屏切换时稍有差异，全屏模式时调用系统全屏播放。</td></tr> <tr><td style="text-align:left;">dragSpotShape</td> <td style="text-align:left;">String</td> <td style="text-align:left;">circular</td> <td style="text-align:left;">设置进度条拖动点的形状，可选 circula | square</td></tr> <tr><td style="text-align:left;">objectFit</td> <td style="text-align:left;">String</td> <td style="text-align:left;">contain</td> <td style="text-align:left;">视频大小与 video 容器的表现形式。可选 contain | cover</td></tr> <tr><td style="text-align:left;">closeControlsTimer</td> <td style="text-align:left;">Number</td> <td style="text-align:left;">3500</td> <td style="text-align:left;">设置播放器定时隐藏控件的时间，可配合 toggleControls 函数接口使用；<code>新增</code></td></tr> <tr><td style="text-align:left;">#</td> <td style="text-align:left;"></td> <td style="text-align:left;"></td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">videoAttribute</td> <td style="text-align:left;">Array</td> <td style="text-align:left;">[]</td> <td style="text-align:left;">此属性为添加更多 H5 Video 标签的属性，参数为接受每个 key value 键值对象，注意如果该数组中属性值在已有设置中存在，那么会覆盖。<br><br>如需配置声明启用同层播放，那么配置如下：videoAttribute:[<br>{attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},<br>{attrKey:'playsinline',attrValue:'playsinline'},<br>{attrKey:'x5-video-player-type',attrValue:'h5-page'},<br>]</td></tr> <tr><td style="text-align:left;">#</td> <td style="text-align:left;"></td> <td style="text-align:left;"></td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">subtitle</td> <td style="text-align:left;">Object</td> <td style="text-align:left;">{}</td> <td style="text-align:left;">添加视频字幕。目前只支持 webvtt 字幕格式，请参考<a href="/zh/guide/subtitle/">视频字幕</a></td></tr> <tr><td style="text-align:left;">parse</td> <td style="text-align:left;">Object</td> <td style="text-align:left;">{}</td> <td style="text-align:left;">添加视频解码插件。请参考：<a href="/zh/guide/preset/">解码播放</a></td></tr> <tr><td style="text-align:left;">plugins</td> <td style="text-align:left;">Object</td> <td style="text-align:left;">{}</td> <td style="text-align:left;">添加播放扩展插件，请参考：<a href="/zh/guide/mui-player-mobile-plugin/">移动端扩展</a> <a href="/zh/guide/mui-player-desktop-plugin/">PC端扩展</a></td></tr></tbody></table> <h2 id="自定义配置"><a href="#自定义配置" class="header-anchor">#</a> 自定义配置</h2> <p>自定义设置播放器控件，样式：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> mp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MuiPlayer</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    container<span class="token operator">:</span><span class="token string">'#mui-player'</span><span class="token punctuation">,</span>
    src<span class="token operator">:</span><span class="token string">'../media/media.mp4'</span><span class="token punctuation">,</span>

    themeColor<span class="token operator">:</span><span class="token string">'#55c612'</span><span class="token punctuation">,</span> <span class="token comment">// 自定义主题颜色</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">属性名</th> <th style="text-align:left;">类型</th> <th style="text-align:left;">默认值</th> <th style="text-align:left;">说明</th></tr></thead> <tbody><tr><td style="text-align:left;">themeColor</td> <td style="text-align:left;">String</td> <td style="text-align:left;">#1e98d4</td> <td style="text-align:left;">主题颜色</td></tr> <tr><td style="text-align:left;">showMiniProgress</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">true</td> <td style="text-align:left;">是否显示底部迷你进度条，当视图操纵控件隐藏时显示。当配置项 live=true 时无效。</td></tr> <tr><td style="text-align:left;">pageHead</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">true</td> <td style="text-align:left;">非全屏模式下，是否显示播放器头部操作控件</td></tr> <tr><td style="text-align:left;"># custom</td> <td style="text-align:left;">Object</td> <td style="text-align:left;"></td> <td style="text-align:left;">自定义播放器控件。请参考： <a href="/zh/guide/custom-control/">自定义播放器控件</a></td></tr> <tr><td style="text-align:left;">custom.headControls</td> <td style="text-align:left;">Array</td> <td style="text-align:left;"></td> <td style="text-align:left;">自定义播放器头部按钮组，参数接受一个配置数组，最大可配置对象为5个，<a href="/zh/guide/custom-control.html#示例一-自定义播放器头按钮">参考</a></td></tr> <tr><td style="text-align:left;">custom.footerControls</td> <td style="text-align:left;">Array</td> <td style="text-align:left;"></td> <td style="text-align:left;">自定义播放器底部控件组，参数接受一个配置数组，最大可配置对象为5个，<a href="/zh/guide/custom-control.html#示例二-自定义播放器底部按钮">参考</a></td></tr> <tr><td style="text-align:left;">custom.rightSidebar</td> <td style="text-align:left;"></td> <td style="text-align:left;"></td> <td style="text-align:left;">自定义播放器右侧弹出栏，参数接受一个配置数组，最大可配置对象为5个，<a href="/zh/guide/custom-control.html#示例三-自定义右侧栏弹出窗口">参考</a></td></tr></tbody></table> <h2 id="播放事件监听"><a href="#播放事件监听" class="header-anchor">#</a> 播放事件监听</h2> <p>MuiPlayer 管理了部分的播放事件，可通过添加对指定事件的监听来处理适当需要的动作。示例：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> mp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MuiPlayer</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>
    
<span class="token comment">// 监听播放器已创建完成</span>
mp<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'ready'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><table><thead><tr><th>事件名</th> <th>类型</th> <th>函数返回</th> <th>说明</th></tr></thead> <tbody><tr><td>back</td> <td>EventHandle</td> <td></td> <td>返回按钮点击时触发，<br>Tag：仅在非全屏模式下触发</td></tr> <tr><td>duration-change</td> <td>EventHandle</td> <td>{duration}</td> <td>当视频时长已更改时触发，只有当时长大于1时发生，单位为秒（s）</td></tr> <tr><td>seek-progress</td> <td>EventHandle</td> <td>{percentage}</td> <td>当用户在视频寻址时触发</td></tr> <tr><td>fullscreen-change</td> <td>EventHandle</td> <td>{direction,fullscreen}</td> <td>当视频进入或者退出全屏时触发。初始播放器器时默认触发一次该事件<br>direction：表示当前播放的方向，在手机端适用<br>fullscreen：表示当前在 pc 环境是否为全屏状态播放，只有在 pc 环境返回该属性<br></td></tr> <tr><td>controls-toggle</td> <td>EventHandle</td> <td>{show}</td> <td>controls 控件状态变化时触发</td></tr> <tr><td>error</td> <td>EventHandle</td> <td>native event</td> <td>播放发生错误</td></tr> <tr><td>destroy</td> <td>EventHandle</td> <td></td> <td>视频销毁事件</td></tr> <tr><td>ready</td> <td>EventHandle</td> <td></td> <td>播放器已创建完成</td></tr></tbody></table> <h2 id="播放器接口"><a href="#播放器接口" class="header-anchor">#</a> 播放器接口</h2> <p>MuiPlayer 对外提供了部分接口，该接口实现了播放器内置的函数，示例：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 初始化播放器配置</span>
<span class="token keyword">var</span> mp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MuiPlayer</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 显示一个消息提示</span>
mp<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token string">'提示...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><table><thead><tr><th>方法名</th> <th>传参</th> <th>必填</th> <th>说明</th></tr></thead> <tbody><tr><td>toggleControls</td> <td>true | false</td> <td>-</td> <td>操作播放器控件显示的状态，参数传递一个布尔类型的参数控制隐藏或显示；<br>默认播放控件会根据<code>closeControlsTimer</code>定时隐藏，可应用高级函数 <code>closeTimer | openTimer</code> 关闭或者打开定时器，示例： <br><code>mp.toggleControls(true).closeTimer();</code><br><br><code>mp.toggleControls(false).openTimer();</code> <code>新增</code></td></tr> <tr><td>showToast</td> <td>String | Object</td> <td>-</td> <td>弹出消息提示，参考接收一个字符或串或者对象<br>Ojbect = { message='', duration=1500, style={} }<br>duration 默认等于1500，单位毫秒</td></tr> <tr><td>video</td> <td>-</td> <td>-</td> <td>返回当前实例的原生video元素</td></tr> <tr><td>reloadUrl</td> <td>Video src</td> <td>-</td> <td>指定一个视频地址重新加载资源，不传参则默认重新加载</td></tr> <tr><td>showRightSidebar</td> <td>Slot name</td> <td></td> <td>弹出自定义右侧栏窗口，<a href="/zh/guide/custom-control.html#示例三-自定义右侧栏弹出窗口">参考</a></td></tr> <tr><td>showLoading</td> <td>-</td> <td>-</td> <td>显示视频缓冲 loading</td></tr> <tr><td>hideLoading</td> <td>-</td> <td>-</td> <td>隐藏视频缓冲 loading</td></tr> <tr><td>openFullScreen</td> <td>-</td> <td></td> <td>开启全屏播放</td></tr> <tr><td>closeFullScreen</td> <td>-</td> <td></td> <td>关闭全屏播放</td></tr> <tr><td>getControls</td> <td>-</td> <td></td> <td>获取所有播放器控件，返回一个数组</td></tr> <tr><td>destroy</td> <td>-</td> <td>-</td> <td>销毁视频播放器</td></tr> <tr><td>sendError</td> <td>event</td> <td></td> <td>主动发送错误报告</td></tr></tbody></table></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/muiplayer/hello-muiplayer/edit/master/docs/docs/zh/guide/api.md" target="_blank" rel="noopener noreferrer">帮助我们改善此页面！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/1/11 上午12:19:40</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/zh/guide/begin.html" class="prev">
        快速开始
      </a></span> <span class="next"><a href="/zh/guide/mui-player-desktop-plugin.html">
        PC 端扩展
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.3641bd26.js" defer></script><script src="/assets/js/23.35f66f6c.js" defer></script><script src="/assets/js/3.67a24b41.js" defer></script><script src="/assets/js/53.868673eb.js" defer></script><script src="/assets/js/15.78fdfcaf.js" defer></script>
  </body>
</html>
